<template>
  <div class="head">

    <div class="switch">
      <span>{{ isPublic ? '公开项目' : '个人项目' }}</span>
      <el-button class="switchButton" type="text" @click="handleSwitch">
        <el-icon>
          <Switch />
        </el-icon>
      </el-button>
    </div>
    <el-button class="button" type="text" @click="showDialog = true">
      <el-icon>
        <CirclePlus />
      </el-icon>
    </el-button>
  </div>

  <div class="head2">
    <el-select v-model="selectvalue" clearable placeholder="关键词" style="width: 120px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>

    <el-input v-model="input" style="width: 240px" placeholder="输入搜索关键字" clearable />
    <el-button @click="handleSearch()">搜索</el-button>


  </div>

  <el-tree-select v-model="selectvalue" :data="data" :render-after-expand="false" placeholder="分类"
    style="width: 100px;margin-top: 10px;" />

  <el-divider />


  <div class="body">
    <el-card v-for="(card, index) in cards" :key="index" class="card" :body-style="{ padding: '0' }"
      @click="viewDetail(card.bandId)" :style="{ cursor: 'pointer', margin: '5px' }">
      <el-container>
        <el-aside width="80px">
          <img :src="projectImg" alt="project-img" class="project-img">
        </el-aside>

        <el-main>
          <div class="rate">
            <el-rate v-model="card.stars" disabled allow-half color="#ffd04b" />
          </div>
          <div class="project">
            <span>{{ card.projectName }}</span>
            <span>{{ card.endTime }}</span>
          </div>
          <div class="foot">
            <div class="tag">
              <el-tag v-for="(tag, idx) in card.tags" :key="idx" type="info" size="mini">
                {{ tag }}
              </el-tag>
            </div>
            <div class="connect">
              <span>{{ card.author }}</span>
              <el-icon>
                <ChatDotRound />
              </el-icon>
            </div>

          </div>
        </el-main>
      </el-container>

    </el-card>
  </div>


  <ProjectDialog :visible="showDialog" :title="'项目添加'" @update:visible="showDialog = $event" />

  <ProjectDetail :visible="showDialog2" :projectId="projectId" :title="'项目详情'" @update:visible="showDialog2 = $event" />

</template>

<script setup lang="ts">
import { Switch, CirclePlus, ChatDotRound } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import ProjectDialog from './EditProject.vue';
import ProjectDetail from './ProjectDetail.vue';
import projectImg from '../../assets/project.png';
import ProjectDao from '../../daos/project_dao';


const projectDao = new ProjectDao();
const projectId = ref(0);


const handleSearch = () => {

  if (isPublic.value) {

    selectPublicInit(selectvalue.value, input.value);
  } else {

    selectstudentinit(selectvalue, input)
  }
};
const selectvalue = ref('')
const data = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    value: '3',
    label: 'Level one 3',
    children: [
      {
        value: '3-1',
        label: 'Level two 3-1',
        children: [
          {
            value: '3-1-1',
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        value: '3-2',
        label: 'Level two 3-2',
        children: [
          {
            value: '3-2-1',
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]
const options = [
  {
    value: 'projectName',
    label: '项目名称',
  },
  {
    value: 'studentName',
    label: '学生名称',
  },
  {
    value: 'stars',
    label: '星级',
  },
]

const cards = ref([]);


// 定义状态变量，用于切换显示“公开项目”和“个人项目”
const isPublic = ref(false);

const handleSwitch = () => {
  if (isPublic.value) {
    presoninit();
  } else {
    publicinit();
  }
  isPublic.value = !isPublic.value;
};

const showDialog = ref(false);

const showDialog2 = ref(false);

const viewDetail = (bandId: number) => {
  showDialog2.value = true;
  projectId.value = bandId;
}
const input = ref('')

onMounted(() => {
  presoninit();
});


const presoninit = () => {
  const result = projectDao.SelectProjectByStudentId().then(result => {
    cards.value = [];
    result.data.data.forEach(element => {
      cards.value.push({
        bandId: element.projectId,
        projectName: element.projectName,
        endTime: new Date(element.endTime).toISOString().split('T')[0],
        tags: element.tagNameArr,
        author: element.masterName,
        stars: element.stars
      });
    });
  });
};

const publicinit = () => {
  const result = projectDao.SelectProjectByIsPublic().then(result => {
    cards.value = [];
    result.data.data.forEach(element => {
      cards.value.push({
        bandId: element.projectId,
        projectName: element.projectName,
        endTime: new Date(element.endTime).toISOString().split('T')[0],
        tags: element.tagNameArr,
        author: element.masterName,
        stars: element.stars
      });
    });
  });
};
const selectPublicInit = (selectvalue, input) => {
  const result = projectDao.SelectProjectByInfo(selectvalue, input).then(result => {
    cards.value = [];
    result.data.data.forEach(element => {
      cards.value.push({
        bandId: element.projectId,
        projectName: element.projectName,
        endTime: new Date(element.endTime).toISOString().split('T')[0],
        tags: element.tagNameArr,
        author: element.masterName,
        stars: element.stars
      });
    });
  });
};

const selectstudentinit = (value, input) => {

  const result = projectDao.SelectStudentProjectByInfo(value.value, input.value).then(result => {
    cards.value = [];
    result.data.data.forEach(element => {
      cards.value.push({
        bandId: element.projectId,
        projectName: element.projectName,
        endTime: new Date(element.endTime).toISOString().split('T')[0],
        tags: element.tagNameArr,
        author: element.masterName,
        stars: element.stars
      });
    });
  });
};
</script>

<style scoped>
.head {
  display: flex;
  height: 50px;
  background-color: rgb(231, 229, 250);
  align-items: center;
  justify-items: center;
}

.body {
  display: flex;
  flex-direction: column;
}

.button {
  display: flex;
  margin-left: auto;
}

.head2 {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  gap: 2px;
}

.switch {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-card {
  height: 100px;
}

.project {
  display: flex;
  justify-content: space-between;
}

.foot {
  display: flex;
  justify-content: space-between;
}

.tag {
  display: flex;
  gap: 3px;
}

.el-container {
  height: 100px;
}

.el-main {
  height: 100px;
  padding: 0%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.el-icon {
  font-size: 20px;
}

.cascader {
  height: 100px;
}

.project-img {
  float: left;
}

.star {
  height: 30%;
}
</style>